<!-- 底部操作 -->
<template>
	<view class="container">
		<!-- 凑单 -->
		<view class="full-threshold">
			<text class="label">再购<text class="red">11.82</text>元，可享【满40减7】</text>
			<text class="label">去凑单</text>
			<text class="iconfont">&#xe60c;</text>
		</view>
		<!-- 合计 -->
		<view class="operation">
			<view class="more">
				<view class="item btn-transition-scale9" @click="handleNavToChat()">
					<text class="iconfont">&#xe615;</text>
					<text class="label">问商家</text>
				</view>
				<view class="item btn-transition-scale9" @click="handleCallPhone()">
					<text class="iconfont">&#xe616;</text>
					<text class="label">打电话</text>
				</view>
				<view class="item btn-transition-scale9" @click="handleNavToCart()">
					<text class="iconfont cart-icon">&#xe60a;</text>
					<text class="label">购物车</text>
					<text class="count">3</text>
				</view>
			</view>
			<button class="submit-btn" @click="handleSubmit()">去结算</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance } from 'vue';
	import { useShopStore } from '../store.js';

	const emits = defineEmits(['update:height']);
	const store = useShopStore();

	// 获取页面实例对象
	onMounted(() => {
		const instance = getCurrentInstance();
		const query = uni.createSelectorQuery().in(instance)
		// 计算高度用来占位
		query.select('.container').boundingClientRect((data) => {
			emits('update:height', data.height);
		}).exec();
		// 获取购物车图标的坐标，用于添加购物车时的动画
		query.select('.cart-icon').boundingClientRect((data) => {
			store.SET_ANIMATION_END_POINT(data.top, data.left);
		}).exec();
	});

	const handleSubmit = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/submit-order/index'
		});
	}

	// 去聊天页面
	const handleNavToChat = () => {
		uni.navigateTo({
			url: '/pagesC-message/chat/index'
		});
	}

	// 打电话
	const handleCallPhone = () => {
		uni.makePhoneCall({
			phoneNumber: '114'
		});
	}

	// 去购物车
	const handleNavToCart = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/shopping-cart/index'
		});
	}
</script>

<style lang="scss" scoped>
	.full-threshold {
		display: flex;
		align-items: center;
		height: 52rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #BB7E53;
		background: #FEF4EB;
		padding: 0 44rpx 0 30rpx;

		.red {
			color: #FE3333;
		}

		.label:first-child {
			flex-grow: 1;
		}

		.iconfont {
			font-size: 18rpx;
		}
	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 104rpx;
		padding: 0 44rpx 0 50rpx;

		.more {
			display: flex;
		}

		.item {
			flex-shrink: 0;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 60rpx;

			.iconfont {
				font-size: 42rpx;
				color: #222;
			}

			.label {
				font-weight: 500;
				font-size: 22rpx;
				color: #222222;
			}

			.count {
				position: absolute;
				top: -4rpx;
				right: 0;
				display: block;
				min-width: 24rpx;
				height: 24rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
				padding: 0 4rpx;
				border-radius: 15rpx;
				background-color: #FE3333;
				box-sizing: border-box;
			}
		}


		.submit-btn {
			width: 230rpx;
			height: 74rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 74rpx;
			background: #FE3333;
			border-radius: 38rpx;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.95);
			}
		}
	}
</style>